<template>
  <div class="HostManage">
    <div>
      <el-input
        v-model="input"
        placeholder="姓名(可不填)"
        class="textName"
      ></el-input>
      <el-select v-model="value1" placeholder="账号状态" class="search">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="value2" placeholder="订单量降序" class="search">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="value3" placeholder="星推荐" class="search">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="value4" placeholder="折扣" class="search">
        <el-option
          v-for="item in options4"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary">搜索</el-button>
      <el-button type="primary" @click="dialogVisible = true"
        >添加主持人</el-button
      >

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="权重" width="80"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
        <el-table-column prop="telephone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="time" label="开通时间" width="100">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80">
        </el-table-column>
        <el-table-column prop="order" label="订单量" width="60">
        </el-table-column>
        <el-table-column prop="discount" label="折扣" width="80">
        </el-table-column>
        <el-table-column prop="recommend" label="星推荐" width="80">
        </el-table-column>
        <el-table-column prop="accountBalance" label="账号状态" width="80">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >权限设置</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >禁用账号</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Host-insert">
      <!-- 添加 -->
      <el-dialog
        title="添加主持人"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" prop="username">
              <el-input
                type="text"
                v-model="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                type="text"
                v-model="ruleForm.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                type="text"
                v-model="ruleForm.email"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">返回</el-button>
            </el-form-item>
          </el-form>
        </span>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >提交</el-button
          >
        </span> -->
      </el-dialog>
      <!-- 权限设置 -->
      <el-dialog
        title="权限设置"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose"
      >
        <span>主持人：{{ ruleForm.username }}</span>
        <span>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="星推荐：" prop="hstart">
              <el-radio v-model="ruleForm.startradio" label="是">是</el-radio>
              <el-radio v-model="ruleForm.startradio" label="否">否</el-radio>
            </el-form-item>
            <el-form-item label="自添订单" prop="order">
              <el-radio v-model="ruleForm.radio1" label="允许">允许</el-radio>
              <el-radio v-model="ruleForm.radio1" label="不允许"
                >不允许</el-radio
              >
            </el-form-item>
            <el-form-item label="折扣：" prop="discount">
              <el-input
                type="text"
                v-model="ruleForm.discount"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="价格：" prop="price">
              <el-input
                type="text"
                v-model="ruleForm.price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="管理费：" prop="price1">
              <el-input
                type="text"
                v-model="ruleForm.price1"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm1('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">返回</el-button>
            </el-form-item>
          </el-form>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from "../../../api";

export default {
  name: "HostManege",
  data() {
    var validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("姓名不能为空"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入邮箱"));
      }
      callback();
    };
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      }
      callback();
    };
    return {
      ruleForm: {
        username: "",
        phone: "",
        email: "",
        password: "",
        id: "",
        startradio: "",
        discount: "",
        price: "",
        radio1: "",
      },
      rules: {
        username: [{ validator: validateName, trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        email: [{ validator: validateEmail, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
      dialogVisible: false,
      dialogVisible1: false,
      input: "",
      options: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "禁用",
        },
      ],
      value1: "",
      options2: [
        {
          value: "选项1",
          label: "订单量降序",
        },
        {
          value: "选项2",
          label: "订单量升序",
        },
        {
          value: "选项3",
          label: "权重降序",
        },
        {
          value: "选项4",
          label: "权重升序",
        },
      ],
      value2: "",
      options3: [
        {
          value: "选项1",
          label: "推荐",
        },
        {
          value: "选项2",
          label: "不推荐",
        },
      ],
      value3: "",
      options4: [
        {
          value: "选项1",
          label: "有折扣",
        },
        {
          value: "选项2",
          label: "无折扣",
        },
      ],
      value4: "",
      options5: [
        {
          value: "选项1",
          label: "有折扣",
        },
        {
          value: "选项2",
          label: "无折扣",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    api
      .getSearchHost({
        search: "",
      })
      .then((res) => {
        console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].starttime = new Date();
          var time = res.data[i].starttime.toLocaleString();
          this.tableData.push({
            id: res.data[i].hid, //id
            date: res.data[i].strong, //权重
            name: res.data[i].hname, //名字
            telephone: res.data[i].hphone, //手机号
            email: res.data[i].hemail,
            time: time, //开通时间
            price: res.data[i].price, //价格
            order: res.data[i].num, //订单量
            discount: res.data[i].discount, //折扣
            recommend: res.data[i].hpstart, //星推荐
            accountBalance: res.data[i].status, //账号状态
          });
        }
      });
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //添加主持人提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api
            .getInsertHost({
              username: this.ruleForm.username,
              password: this.ruleForm.password,
              email: this.ruleForm.email,
              phone: this.ruleForm.phone,
              status: "正常",
            })
            .then((res) => {
              console.log(res.data);
            });
          alert("添加主持人成功");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //主持人权限设置提交按钮
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api
            .getUpdateHost({
              id: this.ruleForm.id,
              startradio: this.ruleForm.startradio,
              discount: this.ruleForm.discount,
              price: this.ruleForm.price,
              status: "正常",
            })
            .then((res) => {
              console.log(res.data);
            });
          alert("主持人权限设置修改成功");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //权限设置
    handleEdit(index, row) {
      console.log(index, row);
      this.ruleForm.id = row.id;
      this.ruleForm.username = row.name;
      this.dialogVisible1 = true;
    },
    //账号禁用
    handleDelete(index, row) {
      console.log(index, row);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
      this.dialogVisible1 = false;
    },
  },
};
</script>

<style scoped>
.HostManage {
  text-align: center;
}
.textName {
  width: 142px;
  padding-right: 10px;
}
.search {
  width: 142px;
  padding-right: 10px;
  padding-bottom: 5px;
}
</style>